<template>
  <div class="content_main">
    <div class="con_head">
      <div class="con_top">
        <div class="con_left">
          <div class="icon_left">
            <img :src="userInfo.avatar" />
          </div>
          <div class="left_text">
            <span>{{ userInfo.nickName }}</span>
            <p>{{ userInfo.phone }}</p>
          </div>
        </div>
        <div class="con_right">
          <img src="../../assets/icon_set.png" />
          <div class="con_image" v-if="this.UnreadMessage.messageNum > 0">
            <img src="../../assets/icon_message.png" /><i></i>
          </div>
          <div class="con_image" v-if="this.UnreadMessage.messageNum == 0">
            <img src="../../assets/icon_message.png" />
          </div>
        </div>
      </div>
      <div class="con_buttom">
        <h3>家庭医生</h3>
        <span>即将上线 敬请期待</span>
      </div>
    </div>
    <div class="con_body">
      <div class="con_title">我的服务</div>
      <div class="con_list">
        <ul>
          <li>
            <img src="../../assets/icon_001.png" />
            <span>我的问诊</span>
          </li>
          <li>
            <img src="../../assets/icon_002.png" />
            <span>我的处方</span>
          </li>
          <li>
            <img src="../../assets/icon_003.png" />
            <span>我的医生</span>
          </li>
          <li>
            <img src="../../assets/icon_004.png" />
            <span>药品订单</span>
          </li>
          <li>
            <img src="../../assets/icon_005.png" />
            <span>就诊人信息</span>
          </li>
          <li>
            <img src="../../assets/icon_006.png" />
            <span>健康档案</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { getUserInfo, getUnreadMessage } from "@/api/index";
export default {
  data() {
    return {
      userInfo: {},
      UnreadMessage: {}
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      let param = {};
      getUserInfo(param).then(res => {
        this.userInfo = res.body;
      });
      let param1 = {};
      getUnreadMessage(param1).then(res => {
        this.UnreadMessage = res.body;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.content_main {
  height: 100%;
  overflow-y: auto;
  background: #fff;
  .con_head {
    height: 3.2rem;
    background: url("../../assets/head_image.png") no-repeat top;
    background-size: cover;
    margin-bottom: 0.41rem;
    .con_top {
      padding: 0.29rem 0.17rem;
      display: flex;
      justify-content: space-between;
      .con_left {
        display: flex;
        align-items: center;
        .icon_left {
          width: 0.55rem;
          overflow: hidden;
        }
        .left_text {
          padding-left: 0.14rem;
          color: #fff;
          span {
            font-size: 0.18rem;
          }
          p {
            font-size: 0.14rem;
          }
        }
      }
      .con_right {
        display: -webkit-inline-box;
        img {
          width: 0.25rem;
          overflow: hidden;
          margin-left: 0.2rem;
          padding-top: 0.05rem;
        }
        .con_image {
          position: relative;
          i {
            display: block;
            background: #f00;
            border-radius: 50%; /*50%圆角*/
            width: 0.07rem;
            height: 0.07rem;
            top: 0.06rem;
            right: 0.01rem;
            position: absolute;
          }
        }
      }
    }
    .con_buttom {
      padding-top: 0.47rem;
      padding-left: 0.4rem;
      h3 {
        font-size: 0.3rem;
        color: #666;
      }
      span {
        font-size: 0.14rem;
        color: #999;
      }
    }
  }
  .con_body {
    padding: 0 0.2rem;
    text-align: center;
    .con_title {
      font-size: 0.16rem;
      color: #333;
      margin-bottom: 0.24rem;
      text-align: left;
    }
    .con_list {
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 33%;
          margin-bottom: 0.24rem;
          img {
            width: 0.3rem;
            overflow: hidden;
            display: block;
            margin: 0 auto;
          }
          span {
            font-size: 0.12rem;
            color: #666;
          }
        }
      }
    }
  }
}
</style>
